<!DOCTYPE html>
<html>
<head>
    
    
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>



    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a{
            margin-top: 120px;
            display: inline-block;
            padding: 20px;
            background: #000;
            color: white;
        }

        #section1 {
            height: 1200px;
            background-color: pink;
        }

        #section2 {
            height: 1200px;
            background-color: yellow;
        }
    </style>
</head>

<body>

    <h1>Smooth Scroll   ,  丝滑滚动  </h1>

    <div class="main" id="section1">
        <h2>Section 1</h2>
        <p>Click on the link to see the "smooth" scrolling effect.</p>
        <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a>
        <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p>
    </div>

    <div class="main" id="section2">
        <h2>Section 2</h2>
        <a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a>
    </div>

</body>
<script>
    $(document).ready(function () {
        // Add smooth scrolling to all links
        $("a").on('click', function (event) {

            // Make sure this.hash has a value before overriding default behavior
            if (this.hash !== "") {
                // Prevent default anchor click behavior
                event.preventDefault();

                // Store hash
                var hash = this.hash;
                console.log(this.hash);

                // Using jQuery's animate() method to add smooth page scroll
                // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
                $('html, body').animate({
                    scrollTop: $(hash).offset().top
                }, 800, function () {

                    // Add hash (#) to URL when done scrolling (default click behavior)
                    window.location.hash = hash;
                });
            }
        });
    });
</script>

</html>